<template>
  <!-- vue3页面 -->
  <section>
    <a-row style="margin-bottom: 20px" :gutter="[16, 16]">
      <a-col span="9">
        <a-col>
          <div class="mainBox">
            <div class="bar" style="margin-bottom: 20px"></div>
            <div class="echart lt">
              <div class="lt_echart">
                <MyEchart :options="surveyOption" ref="surveyRef" />
              </div>
            </div>
          </div>
          <div class="mainBox">
            <div class="bar"></div>
            <div class="echart lc">
              <div class="lc_echart">
                <div class="lt_echart_item">
                  <div class="count">999</div>
                  <div class="ball"></div>
                  <div class="title">场馆数量</div>
                </div>
                <div class="lt_echart_item">
                  <div class="count">999</div>
                  <div class="ball"></div>
                  <div class="title">心理咨询师数量</div>
                </div>
                <div class="lt_echart_item">
                  <div class="count">999</div>
                  <div class="ball"></div>
                  <div class="title">律师数量</div>
                </div>
                <div class="lt_echart_item">
                  <div class="count">999</div>
                  <div class="ball"></div>
                  <div class="title">预约人次</div>
                </div>
                <div class="lt_echart_item">
                  <div class="count">999</div>
                  <div class="ball"></div>
                  <div class="title">预约人次</div>
                </div>
                <div class="lt_echart_item">
                  <div class="count">999</div>
                  <div class="ball"></div>
                  <div class="title">预约人次</div>
                </div>
              </div>
            </div>
          </div>
          <div class="mainBox">
            <div class="bar"></div>
            <div class="echart lb">
              <div class="echart lt">
                <div class="lb_echart">
                  <div class="lt_echart_item">
                    <div class="count">999</div>
                    <div class="ball"></div>
                    <div class="title">场馆数量</div>
                  </div>
                  <div class="lt_echart_item">
                    <div class="count">999</div>
                    <div class="ball"></div>
                    <div class="title">心理咨询师数量</div>
                  </div>
                  <div class="lt_echart_item">
                    <div class="count">999</div>
                    <div class="ball"></div>
                    <div class="title">律师数量</div>
                  </div>
                  <div class="lt_echart_item">
                    <div class="count">999</div>
                    <div class="ball"></div>
                    <div class="title">预约人次</div>
                  </div>
                  <div class="lt_echart_item">
                    <div class="count">999</div>
                    <div class="ball"></div>
                    <div class="title">预约人次</div>
                  </div>
                  <div class="lt_echart_item">
                    <div class="count">999</div>
                    <div class="ball"></div>
                    <div class="title">预约人次</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-col>

      <a-col span="15">
        <div class="mainBox">
          <div class="bar" style="margin-bottom: 20px"></div>
          <div class="echart rt">
            <div class="rt-echart">
              <MyEchart :options="condoleChangeOption" ref="condoleChangeRef" />
            </div>
          </div>
        </div>
        <div class="mainBox">
          <div class="bar" style="margin-bottom: 20px"></div>
          <div class="echart rc">
            <div class="rc-echart">
              <MyEchart :options="condoleOptions" ref="condoleRef" />
            </div>
          </div>
        </div>
        <div class="mainBox">
          <div class="bar" style="margin-bottom: 20px"></div>
          <div class="echart rc">
            <div class="rc-echart">
              <MyEchart :options="diseaseSubsidyOption" ref="diseaseSubsidyRef" />
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </section>
  <div class="box"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, shallowRef, onUnmounted } from "vue";
import MyEchart from "./echart.vue";
import { getSurveyOption } from "./serviceOptions/survey";
import { getCondoleOptions } from "./serviceOptions/condole";
import { getCondoleChangeOption } from "./serviceOptions/condoleChange";
import { getDiseaseSubsidyOptions } from "./serviceOptions/diseaseSubsidy";

const surveyOption = ref();
const condoleOptions = ref();
const condoleChangeOption = ref();
const diseaseSubsidyOption = ref();

/** echarts图表的ref */
const surveyRef = shallowRef();
const condoleRef = shallowRef();
const condoleChangeRef = shallowRef();
const diseaseSubsidyRef = shallowRef();

onMounted(() => {
  surveyOption.value = getSurveyOption();
  condoleOptions.value = getCondoleOptions();
  condoleChangeOption.value = getCondoleChangeOption();

  const parasm = {
    year: [
      "2014",
      "2015",
      "2016",
      "2017",
      "2018",
      "2019",
      "2020",
      "2021",
      "2022",
      "2023",
    ],
    numbers: [15, 20, 25, 40, 44, 51, 62, 65, 70, 80],
    amount: [
      15 * 0.2,
      20 * 0.2,
      25 * 0.2,
      40 * 0.2,
      44 * 0.2,
      51 * 0.22,
      62 * 0.2,
      65 * 0.2,
      70 * 0.2,
      80 * 0.2,
    ],
  };
  diseaseSubsidyOption.value = getDiseaseSubsidyOptions(parasm);

  window.addEventListener("resize", onResize);
});

const onResize = () => {
  surveyRef.value.resize();
  condoleRef.value.resize();
  condoleChangeRef.value.resize();
  diseaseSubsidyRef.value.resize();
};

onUnmounted(() => {
  window.removeEventListener("resize", onResize);
});
</script>

<style scoped lang="less">
@font-face {
  font-family: "number";
  src: url("../../assets/echart/number.ttf");
}
section {
  padding: 0 10px;
  color: #fff;
}
.mainBox {
  position: relative;
  width: 100%;
  height: 310px;
  margin-bottom: 20px;
}
.bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 20px solid transparent;
  border-width: 50px 30px 20px 30px;
  border-image: url("../../assets/echart/border2.png") 50 30 20 30 stretch;
  box-sizing: border-box;
  transform: scale(1.02);
  animation: changeOpacity 5s infinite linear reverse;
  transition: all 0.6s;
  .title {
    color: white;
    font-size: 16px;
    padding: 10px 0 0 40px;
  }
}
.lt {
  display: flex;
  width: 100%;
  .lt_echart {
    z-index: 3;
    width: 100%;
    height: 100%;
  }
}

.lc {
  display: flex;
  z-index: 3;
  .lc-echart {
    z-index: 2;
    width: 50%;
    height: 100%;
  }
}
.rc {
  z-index: 2;
  .rc-echart {
    width: 100%;
    height: 100%;
  }
}
.lc {
  display: flex;
  .lc-echart {
    z-index: 2;
    width: 50%;
    height: 100%;
  }
}
.lb,
.lc {
  display: flex;
  .lb_echart,
  .lc_echart {
    padding: 10px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 50px;
    .lt_echart_item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 10px 0;
      background: url(../../assets/echart/di01.png) no-repeat bottom center;
      background-size: contain;
      color: #fff;
      text-shadow: 0 0 5px #69e0ff, 0 0 5px #69e0ff;
      .count {
        font-family: "number";
        font-size: 18px;
        transform: translateY(38px) scale(1.3);
      }
      .title {
        font-size: 13px;
        transform: translateY(-5px);
      }
      .ball {
        position: relative;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        transform: translateY(-10px);
        background: url(../../assets/echart/cicle01.png) no-repeat bottom center;
        background-size: contain;
        &::after {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 106%;
          height: 106%;
          content: "";
          border-radius: 50%;
          border: 3px solid rgba(255, 255, 255, 0.5);
          animation: ball 2s linear infinite;
        }
      }
    }
    .lt_echart_item:nth-child(2) {
      background-image: url(../../assets/echart/di02.png);
      .ball {
        background-image: url(../../assets/echart/cicle02.png);
        &::after {
          animation-delay: 0.3s;
        }
      }
    }
    .lt_echart_item:nth-child(5) {
      background-image: url(../../assets/echart/di02.png);
      .ball {
        background-image: url(../../assets/echart/cicle02.png);
        &::after {
          animation-delay: 0.6s;
        }
      }
    }
    .lt_echart_item:nth-child(3) {
      background-image: url(../../assets/echart/di03.png);
      .ball {
        background-image: url(../../assets/echart/cicle03.png);
        &::after {
          animation-delay: 0.1s;
        }
      }
    }
    .lt_echart_item:nth-child(6) {
      background-image: url(../../assets/echart/di03.png);
      .ball {
        background-image: url(../../assets/echart/cicle03.png);
        &::after {
          animation-delay: 0.9s;
        }
      }
    }
    .lt_echart_item:nth-child(1) {
      .ball {
        &::after {
          animation-delay: 0.8s;
        }
      }
    }
  }
}
.rt {
  display: flex;
  .rt-echart {
    width: 100%;
    height: 100%;
  }
}
.echart {
  padding: 0 3px 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@keyframes changeOpacity {
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ball {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}
</style>
